<template>
    <div>
        <div class="style-navbar">
            <div class="style-navbar-item" @click="fetch('*')" id="*">全部</div>
            <template v-for="item in styles">
                <div class="style-navbar-item" @click="fetch(item)">{{item}}</div>
            </template>
        </div>
        <div style="clear:both;"></div>
        <ul class="fix-bottom" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
            <li class="index-li" v-for="item in novels">
                <div v-on:click="check_is_read(item.id)">
                    <img v-lazy="item.cover" class="index-item-cover">
                    <div class="index-item-content">
                        <div class="index-item-content-title">{{ item.title }}</div>
                        <span class="index-item-content-m">{{item.style}} | {{item.auth}}</span>
                    </div>
                </div>
            </li>
        </ul>
        <tabbar-components tabindex="style"></tabbar-components>
    </div>
</template>

<style lang="css">
    .style-navbar {
        width: 100%;
    }
    .style-navbar-item {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 50%;
        float: left;
        padding: 6px 0px;
        text-align: center;
        background-color:#FAFAFA;
        border: 1px solid #FFF;
    }
    .style-navbar-item:hover {
        background-color:#F2F2F2;
    }
</style>

<script type="text/babel">
    import TabbarComponents from './tabbar.vue'
    import { Indicator } from 'mint-ui'
    export default{
        data(){
            return{
                styles: [],
                page: 0,
                novels: [],
                ostyle: "*",
                style:"*",
                loading: true
            }
        },
        created() {
            let _this = this
            Indicator.open({
                spinnerType: 'fading-circle'
            })
            _this.$http.get("https://novel.nightc.com/v1/styles").then((resp) => {
                let body = resp.body
                if (body != undefined && body.code == 0) {
                    _this.styles = body.data
                    Indicator.close()
                }
            },(resp) => {
                Indicator.close()
                let body = resp.body
                if (body != undefined) {
                    MessageBox('提示', body.data);
                }
            })
            _this.fetch(_this.style)
        },
        methods: {
            loadMore: function() {
                this.loading = true
                this.fetch(this.style)
            },
            onImagerr: function() {
                console.log("xxx");
                this.src = "http://spider-img.nightc.com/cover.jpg"
            },
            created: function() {
                this.fetch(this.style)
            },
            check_is_read(nid) {
                let _this = this
                let bookmark = localStorage["novel_mark_id" + nid]
                if (bookmark != undefined && bookmark > 0) {
                    _this.$router.push("/chapter/" + bookmark)
                } else {
                    _this.$router.push("/novel/" + nid)
                }
            },
            fetch: function(style) {
                let _this = this
                _this.style = style
                let url = ''
                if (String(style) != String(_this.ostyle)) {
                    _this.novels = []
                    _this.ostyle = style
                    _this.page = 0
                    _this.loading = true
                }
                if (_this.style == "*") {
                    url = "https://novel.nightc.com/v1/novels?page=" + _this.page + "&count=10"
                } else {
                    url = "https://novel.nightc.com/v1/novels/style/"+_this.style+"?page=" + _this.page + "&count=10"
                }
                _this.$http.get(url).then((response) => {
                    let body = response.body
                    if (body.code == 0) {
                        for (let i=0;i<body.data.length;i++) {
                            let data = {
                                title: body.data[i].title,
                                auth: body.data[i].auth,
                                style: body.data[i].style,
                                cover: body.data[i].cover,
                                introduction: body.data[i].introduction,
                                id: body.data[i].id,
                            }
                            if (data.cover == "") {
                                data.cover = "https://blog.nightc.com/content/images/2016/06/QQ--20160614130849.jpg"
                            }
                            if (data.title != undefined) {
                                _this.novels.push(data)
                            }
                        }
                        _this.page = body.next
                        if (_this.page > 0) {
                            this.loading = false
                        }
                    } else {
                        console.log(body.data)
                    }
                },() => {
                    console.log("error")
                })
            }
        },
        components:{
            TabbarComponents,
        }
    }
</script>
